<template>
  <div class="discuss-wrapper">
    <div class="top border-bottom">
      <p class="text">交流区（{{lists.length}}）</p>
      <div class="comment" @click="goComment()">
        <span class="write-icon"></span>
        <span class="title">写评论</span>
      </div>
    </div>
    <ul class="main">
      <li class="desc border-bottom-last" v-for="(lis,index) in lists" :key="index">
        <img
          :src="lis.head_pic || 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1651318081,2860235060&fm=27&gp=0.jpg'"
          alt="">
        <div class="content">
          <div class="nick-name">
            <span class="text">{{lis.nickname}}</span>
            <span class="sex-icon"></span>
          </div>
          <div class="address">
            <span class="text">{{lis.areas_name}}</span>
            <span class="time">{{lis.create_time * 1000 | dateFmt(('YYYY-MM-DD HH:mm:ss'))}}</span>
          </div>
        </div>
        <div class="comment-box" @click="goReply(lis.id)">
          <span class="comment-text">回复</span>
          <span class="comment-icon"></span>
        </div>
        <div class="ask" v-if="lis.to_uid">
          <div>
            <span>回复：{{lis.to_name}}</span>
            {{lis.content}}
          </div>
          <!--微信浏览器图片显示-->
          <ul v-show="weixinShow" class="bg clearfix">
            <li v-for="(item,index) in lis.img" :key="index">
              <div class="bgimages" v-lazy:background-image="item" @click="preview(index,lis.img)"></div>
            </li>
          </ul>
          <!--普通浏览器图片显示-->
          <div v-show="ordinaryShow" class="img_pre" v-if="lis.img!==null">
            <div class="img-box" v-for="(url, index) in lis.img" :style="{'background-image': 'url(' + url + ')'}"
                 :key="index">
              <img preview="1" preview-text="" :src="url" alt="">
            </div>
          </div>
        </div>
        <div class="ask" v-else>
          <p>{{lis.content}}</p>
          <!--微信浏览器图片显示-->
          <ul v-show="weixinShow" class="bg clearfix">
            <li v-for="(item,index) in lis.img" :key="index">
              <div class="bgimages" v-lazy:background-image="item" @click="preview(index, lis.img)"></div>
            </li>
          </ul>
          <!--普通浏览器图片显示-->
          <div v-show="ordinaryShow" class="img_pre" v-if="lis.img!==null">
            <div class="img-box" v-for="(url, index) in lis.img" :style="{'background-image': 'url(' + url + ')'}"
                 :key="index">
              <img preview="1" preview-text="" :src="url" alt="">
            </div>
          </div>
        </div>
        <!--回复-->
        <mt-popup
          v-model="replyShow"
          popup-transition="popup-fade">
          <div class="box" @touchmove.prevent>
            <div class="text-content">
              <textarea @keyup="writeContent" @input="writeContent" name="" id="" placeholder="回复..." cols="30"
                        rows="10" v-model="msgReply"
                        maxlength="200"></textarea>
              <div class="count">
                {{currentCount}}/{{totalCount-currentCount}}
              </div>
            </div>
            <!-- <mt-field class="msgbox" placeholder="回复..." type="textarea" rows="4" v-model="msgReply"></mt-field> -->
            <div class="vue-upload-img-multiple">
              <ul>
                <li v-show="image" v-for="(image,index) in imagesLrz" :key="index">
                  <div class="img_size">
                    <div :style="'backgroundImage:url('+image+')'" class="picture"></div>
                    <span @click='delImage(index)' class="remove">x</span>
                  </div>
                </li>
                <li v-show="showLoading">
                  <img class="loading" src="../../common/images/loading.gif" alt="">
                </li>
                <li class="input-container" v-show="uploadShow">
                  <input type="file" @change="onFileChange" accept="image/gif,image/jpeg,image/jpg,image/png"
                         class="file-input" ref="input">
                </li>
              </ul>
            </div>
            <p class="more">最多上传2张图片</p>
            <div class="line"></div>
            <div class="send" @click="sendReply()" v-show="!repBtnShow">
              <mt-button plain>发送</mt-button>
            </div>
            <div class="send" v-show="repBtnShow">
              <mt-button plain disabled>发送</mt-button>
            </div>
            <!-- <button @click="sendReply()">
              <span>发送</span>
            </button> -->
          </div>
        </mt-popup>
      </li>
    </ul>
    <!--写评论-->
    <mt-popup
      v-model="commentShow"
      popup-transition="popup-fade">
      <div class="box" @touchmove.prevent>
        <div class="text-content">
          <textarea @keyup="writeContent" @input="writeContent" name="" id="" placeholder="我来说两句..." cols="30" rows="10"
                    v-model="msgDetail"
                    maxlength="200"></textarea>
          <div class="count">
            {{currentCount}}/{{totalCount-currentCount}}
          </div>
        </div>
        <!-- <mt-field class="msgbox" placeholder="我来说两句..." type="textarea" rows="4" v-model="msgDetail"></mt-field> -->
        <div class="vue-upload-img-multiple">
          <ul>
            <li v-show="image" v-for="(image,index) in imagesLrz" :key="index">
              <div class="img_size">
                <div :style="'backgroundImage:url('+image+')'" class="picture"></div>
                <span @click='delImage(index)' class="remove">x</span>
              </div>
            </li>
            <li v-show="showLoading">
              <img class="loading" src="../../common/images/loading.gif" alt="">
            </li>
            <li class="input-container" v-show="uploadShow">
              <input type="file" @change="onFileChange" accept="image/gif,image/jpeg,image/jpg,image/png"
                     class="file-input" ref="input">
            </li>
          </ul>
        </div>
        <p class="more">最多上传2张图片</p>
        <div class="line"></div>
        <div class="send" @click="sendComment()" v-show="!comBtnShow">
          <mt-button plain>发送</mt-button>
        </div>
        <div class="send" v-show="comBtnShow">
          <mt-button plain disabled>发送</mt-button>
        </div>
        <!-- <button @click="sendComment()">
          <span>发送</span>
        </button> -->
      </div>
    </mt-popup>

  </div>
</template>

<script>
  import commonUrl from '../../common/js/commonUrl.js'
  import qs from 'qs'
  import {loadOpenId} from '../../common/js/cache.js'
  import {Toast} from 'mint-ui'
  import wx from 'weixin-js-sdk'
  import lrz from 'lrz'
  import {IsWeiXin} from '../../common/js/isWeixin'

  export default {
    data() {
      return {
        commentShow: false,
        replyShow: false,
        msgDetail: '',
        msgReply: '',
        reId: {
          type: Number
        },
        maxSize: 0,
        ready: false,
        totalCount: 200,
        currentCount: 0,
        imagesLrz: [],
        showLoading: false,
        comBtnShow: false,
        repBtnShow: false,
        uploadShow: true,
        ordinaryShow: {
          type: Boolean // 普通浏览器
        },
        weixinShow: {
          type: Boolean // 微信浏览器
        }
      }
    },
    props: ['list', 'lists'],
    created() {
      // 如果图片是异步生成，在图片数据更新后调用
      this.$previewRefresh()
      if (IsWeiXin()) {
        this.ordinaryShow = false
        this.weixinShow = true
      } else {
        this.ordinaryShow = true
        this.weixinShow = false
      }
    },
    methods: {
      goComment() {
        this.commentShow = true
        this.currentCount = 0
        this.imagesLrz = []
        this.msgDetail = ''
        this.comBtnShow = false
        this.uploadShow = true
      },
      goReply(id) {
        this.replyShow = true
        this.reId = id
        this.currentCount = 0
        this.imagesLrz = []
        this.msgReply = ''
        this.repBtnShow = false
        this.uploadShow = true
      },
      writeContent() {
        this.currentCount = this.msgReply.length || this.msgDetail.length
        let remainCount = this.totalCount - this.currentCount
        if (!remainCount) {
          Toast({
            message: '字数不能超过200',
            position: 'middle',
            duration: 1000
          })
        }
      },
      // 发表评论
      sendComment() {
        if (!this.msgDetail.trim().length || !this.msgDetail) {
          Toast({
            message: '评论内容不能为空',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.comBtnShow = true
        const url = `${commonUrl.apihost}index.php/home/comment/addcomment`
        const data = {
          content: this.msgDetail,
          related_id: this.list.id,
          comment_type: this.list.comment_type,
          id: '',
          openid: loadOpenId(),
          img: this.imagesLrz
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            this.$emit('passMethods')
            Toast({
              message: '评论成功',
              position: 'middle',
              duration: 1000
            })
            this.commentShow = false
            this.msgDetail = ''
          } else {
            Toast({
              message: '评论失败',
              position: 'middle',
              duration: 1000
            })
          }
        })
      },
      // 回复
      sendReply() {
        if (!this.msgReply.trim().length || !this.msgReply) {
          Toast({
            message: '回复内容不能为空',
            position: 'middle',
            duration: 1000
          })
          return
        }
        this.repBtnShow = true
        const url = `${commonUrl.apihost}index.php/home/comment/addcomment`
        const data = {
          content: this.msgReply,
          related_id: this.list.id,
          comment_type: this.list.comment_type,
          id: this.reId,
          openid: loadOpenId(),
          img: this.imagesLrz
        }
        this.$http.post(url, qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
          if (res.data.code === 200) {
            this.$emit('passMethods')
            Toast({
              message: '回复成功',
              position: 'middle',
              duration: 1000
            })
            this.replyShow = false
            this.msgReply = ''
          } else {
            Toast({
              message: '回复失败',
              position: 'middle',
              duration: 1000
            })
          }
        })
      },
      onFileChange(e) {
        if (this.imagesLrz.length > 1) {
          Toast({
            message: '最多上传2张图片',
            position: 'middle',
            duration: 2000
          })
          return
        }
        let files = e.target.files || e.dataTransfer.files
        if (!files.length) return
        this.createImage(files)
      },
      createImage(file, e) {
        this.showLoading = true
        lrz(file[0], {quality: 0.4})
          .then((rst) => {
            let img = new Image()
            img.src = rst.base64
            this.imagesLrz.push(rst.base64)
            if (this.imagesLrz.length > 1) {
              this.uploadShow = false
            }
            this.showLoading = false
          })
          .always(function () {
            // 清空文件上传控件的值
            e.target.value = null
          })
      },
      delImage(index) {
        this.imagesLrz.splice(index, 1)
        this.uploadShow = true
        this.$refs.input.value = ''
      },
      preview(index, img) {
        wx.previewImage({
          current: img[index], // 当前显示图片的http链接
          urls: img // 需要预览的图片http链接列表
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../common/sass/mixin.scss';

  .mint-toast {
    z-index: 9999;
  }

  .discuss-wrapper {

    .top {
      height: 33px;
      line-height: 33px;
      margin: 0 10px;
      display: flex;
      justify-content: space-between;
      p {
        float: left;
      }
      .comment {
        color: rgb(225, 127, 0);
        float: right;
        .write-icon {
          display: inline-block;
          width: 11px;
          height: 11px;
          background-size: 11px 11px;
          background-repeat: no-repeat;
          @include bgimg('../publish/images/xiepinglun');
          vertical-align: middle;
          margin-right: 3px;
        }
      }
    }
    .main {
      .desc {
        padding-top: 10px;
        margin: 0 10px;
        padding-bottom: 10px;
        img {
          width: 40px;
          height: 40px;
          margin-right: 12px;
          border-radius: 50%;
          vertical-align: middle;
        }
        .content {
          display: inline-block;
          text-align: left;
          vertical-align: middle;
          .nick-name {
            margin-bottom: 5px;
          }
          .address {
            color: rgb(153, 153, 153);
          }
        }
        .comment-box {
          padding: 20px 10px;
          display: inline;
          float: right;
          .comment-text {
            float: left;
            margin-right: 5px;
            color: rgb(153, 153, 153);
          }
          .comment-icon {
            float: right;
            width: 13.2px;
            height: 12px;
            background-size: 13.2px 12px;
            background-repeat: no-repeat;
            @include bgimg('../publish/images/pinglun');
            vertical-align: middle;
          }
        }

        .ask {
          margin-top: 5px;
          padding-left: 50px;
          font-size: 13px;
          p {
            margin-left: 5px;
          }
          span:first-child {
            font-size: 12px;
            margin-left: 5px;
          }
          /*评论区图片样式*/
          .bg {
            margin-top: 5px;
            li {
              float: left;
              margin-right: 5px;
              margin-left: 5px;
            }
            .bgimages {
              width: 58px;
              height: 58px;
              background-size: cover;
              background-repeat: no-repeat;
            }
          }
          .img_pre {
            margin-top: 5px;
            width: 100%;
            display: inline-block;
            .img-box {
              float: left;
              /*width: 30%;*/
              padding: 11%;
              margin: 0.65%;
              position: relative;
              overflow: hidden;
              background-size: cover;
              background-position: center;
              background-repeat: no-repeat;
              img {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                opacity: 0;
              }
            }
          }
          span {
            color: #20a0ff;
            font-size: 14px;
          }
        }
      }
    }
    .mint-popup {
      border-radius: 5px;
      width: 70%;
      .box {
        width: 100%;
        // height: 50%;
        // text-align: center;
        .more {
          padding: 5px 10px;
          color: red;

        }
        .text-content {
          padding: 10px;
          position: relative;
          text-align: center;
          textarea {
            box-sizing: border-box;
            width: 100%;
            padding: 10px;
            height: 120px;
            background: #f2f2f2;
            border-radius: 5px;
            resize: none;
            outline: none;
            border: none;
            font-size: 14px;
          }
          .count {
            position: absolute;
            bottom: 20px;
            right: 20px;
            color: #0078de;
          }
        }
        .vue-upload-img-multiple {
          width: 100%;
          height: 100%;
          padding: 0 10px 10px;
          box-sizing: border-box;
          display: inline-block;
          ul {
            display: flex;
            flex-wrap: wrap;
            li {
              width: 24%;
              margin-right: 6%;
              text-align: center;
              .loading {
                display: block;
                margin: 0 auto;
                margin-top: 10px;
              }
              .img_size {
                display: inline-block;
                position: relative;
                .picture {
                  width: 58px;
                  height: 58px;
                  float: left;
                  border-radius: 4px;
                  background-position: center center;
                  background-repeat: no-repeat;
                  background-size: cover;
                }
                .remove {
                  position: absolute;
                  top: -4px;
                  right: -2px;
                  width: 18px;
                  height: 18px;
                  z-index: 11;
                  line-height: 18px;
                  text-align: center;
                  border-radius: 50%;
                  // border-bottom: 1px solid #000;
                  background-color: red;
                  color: #fff;
                  font-size: 15px;
                }
              }
            }
            .input-container {
              display: inline-block;
              background: url('../common/images/tianjiatupian@2x.png') no-repeat;
              width: 58px;
              height: 58px;
              background-size: 100% 100%;
              text-align: center;
            }
            .file-input {
              height: 70px;
              width: 70px;
              opacity: 0;
              font-size: 0;
            }
          }
        }
        .mint-field-core {
          border: 1px solid #E3E3E3;
          border-radius: 3px;
        }
        .replay {
          padding: 5px;
        }
        .line {
          height: 1px;
          background-color: #E3E3E3;
        }
        .bgimg {
          float: left;
          width: 57px;
          height: 57px;
          margin-right: 5px;
          background-image: url('./images/back@2x.png');
          background-size: cover;
          background-repeat: no-repeat;
        }
        .send {
          text-align: center;
          padding: 10px 0;
          button {
            background: #fff;
            margin-top: 0;
            border: 1px solid #0078de;
            padding: 2px 20px;
          }
          .mint-button {
            height: 30px;
            font-size: 16px;
          }
          .mint-button--default.is-plain {
            color: #0078de;
          }
        }
        .msgbox {
          // border-bottom: 1px solid #d7d7d7;
          border-top-left-radius: 5px;
          border-top-right-radius: 5px;
        }
        .mint-field-core {
          resize: none;
        }
        // button {
        //   outline: none;
        //   padding: 5px 20px 5px 20px;
        //   background: #20a0ff;
        //   margin-top: 7px;
        //   span {
        //     font-size: 12px;
        //     color: #fff;
        //   }
        // }
      }
    }
  }
</style>
